<template>
<el-row :gutter="20" style="padding-top: 2%;">
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="16"><div class="grid-content ep-bg-purple" />
    <div>
        <div>
            <el-descriptions title='个人信息'>
                <el-descriptions-item label="生日：">{{ usermsg.birthday }}</el-descriptions-item>
                <el-descriptions-item label="账号：">{{ usermsg.username }}</el-descriptions-item>
                <br>
                <el-descriptions-item label="年龄：">
                    <el-tag size="small"> {{ usermsg.age }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="邮箱：">{{ usermsg.email }}</el-descriptions-item>
                <el-descriptions-item label="居住地：">{{ usermsg.address }}</el-descriptions-item>
                <el-descriptions-item label="电话：">{{ usermsg.tel }}</el-descriptions-item>
            </el-descriptions>
           
        </div>

        <div>
            <el-tabs :tab-position="tabPosition" class="demo-tabs">
            <el-tab-pane label="用户发布的话题">
                <div class="Topstory-content">
                    <ul v-if="topicmsg && topicmsg.length > 0">
                        <li v-for="v in topicmsg" :key="v.id" class="topic-item">
                            <div>
                                <h2 class="topic-title" @click="goDetails(v)">{{ v.title }}</h2>
                                <div class="topstory-hd">
                                    <span>{{ v.publisher_name }}</span>
                                </div>
                                
                                <div class="topic-content">{{ v.content }}</div>
                                <div>
                                    <p class="publish-time">发布时间:{{ v.publish_time }}</p>
                                </div>
                            </div>
                            <el-row :gutter="20" class="action-area">
                                <el-col :span="4">
                                    <el-button type="text" @click="voteUp(v)">
                                        <i class="iconfont icon-xiangshang1"></i> 赞成 {{ v.likes_number }}
                                    </el-button>
                                </el-col>
                                <el-col :span="4">
                                    <el-button type="text" @click="voteDown(v)">
                                        <i class="iconfont icon-xiangxia2"></i>反对{{ v.dislikes_number }}
                                    </el-button>
                                </el-col>
                                <el-col :span="4">
                                    <el-button type="text" @click="goDetails(v)">
                                        <i class="iconfont icon-xiaoxi"></i> {{ v.comment_count }}条评论
                                    </el-button>
                                </el-col>
                                <el-col :span="4">
                                    <el-button type="text" @click="collectTopic(v)">
                                        <i class="iconfont icon-shoucang"></i> 收藏
                                    </el-button>
                                </el-col>
                            </el-row>
                        </li>
                    </ul>
                    <div v-else>
                        <el-empty description="暂无发表话题"></el-empty>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        </div>


    </div>
    
    
    </el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
</template>

<script setup> 
import axios from 'axios'
import { useRoute,useRouter } from 'vue-router'
import { ref,onMounted } from 'vue'
const token = localStorage.getItem('token')
const route = useRoute()
const router = useRouter()
const usermsg = ref([])
const topicmsg = ref([])
onMounted(async () => {
await getusermsg(route.params.id);

});

const getusermsg = async (id) => {
  try {
    const response = await axios.post('http://127.0.0.1:8000/user/api/getotherusermsg/', {
      user_id: id, // 替换为你要评论的话题的ID
    }, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    // 处理成功响应，比如刷新评论列表等操作
    console.log(response.data.message);
    usermsg.value = response.data.usermsg
    topicmsg.value = response.data.topicmsg
  } catch (error) {
    // 处理请求错误，比如显示错误消息
    console.error('提交评论失败:', error);
  }
}

//跳转到详情页
function goDetails(v) {
  router.push({ 
    name: 'topicdetails',
    params: { 
      id: v.id
    } 
  });
}


//收藏按钮的点击事件处理函数
async function collectTopic(v) {
  if (!token) {
    alert('请先登录');
    return;}
  try {
    const response = await axios.post('http://127.0.0.1:8000/user/api/collect_topic/', {
      topic_id: v.id,
      token: token
    }, {
      headers: {
        'Content-Type': 'application/json'
      },
    });
   alert(response.data.message)
   
  } catch (error) {
    console.error('收藏失败', error);
    // 处理请求失败的情况
  }
}


// 定义赞成按钮的点击事件处理函数
async function voteUp(v) {
  if (!token) {
    alert('请先登录');
    return;
  }
  try {
    // 向后端发送请求，表示对指定话题进行点赞
    const response = await axios.post(`http://127.0.0.1:8000/user/api/vote_up/${v.id}/`);
    // 根据后端返回的数据更新前端页面
    const updatedTopic = response.data; // 假设后端返回更新后的话题对象
    const index = topicmsg.value.findIndex(topic => topic.id === v.id);
    if (index !== -1) {
        topicmsg.value[index] = updatedTopic; // 更新话题列表中的对应项
    }
    window.location.reload(); // 重新加载页面
  } catch (error) {
    console.error('赞成失败', error);
    // 处理请求失败的情况
  }
}
// 不赞成按钮的点击事件处理函数
async function voteDown(v) {
  if (!token) {
    alert('请先登录');
    return;}
  try {
    // 向后端发送请求，表示对指定话题进行点赞
    const response = await axios.post(`http://127.0.0.1:8000/user/api/vote_down/${v.id}/`);
    // 根据后端返回的数据更新前端页面
    const updatedTopic = response.data; // 假设后端返回更新后的话题对象
    const index = topicmsg.value.findIndex(topic => topic.id === v.id);
    if (index !== -1) {
        topicmsg.value[index] = updatedTopic; // 更新话题列表中的对应项
    }
    window.location.reload(); // 重新加载页面
  } catch (error) {
    console.error('赞成失败', error);
    // 处理请求失败的情况
  }
}


</script>

<style>
/* 话题列表项 */
.topic-item {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

/* 话题标题 */
.topic-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

/* 话题内容 */
.topic-content {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

/* 发布时间 */
.publish-time {
    font-size: 12px;
    color: #999;
}

/* 动作区 */
.action-area {
    align-items: center;
}

.webname {
    margin-bottom: 0;
}

</style>